<template>
<ul class="mall-list-mod">
	<li class="mall-list-item" v-for='item in data'>
		<router-link class="mall-nav-link" to='/me'>
			<div class="mall-img-box">
				<img :src="item.img" />
			</div>
			<div class="mall-msg1">{{item.title}}</div>
			<div class="mall-msg2">${{item.price}}</div>
		</router-link>
		
	</li>
</ul>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps({
	data: {
		type: Array,
		required: true,
	}
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mall-list-mod{ display: flex; flex-wrap: wrap; margin: 0.2rem 0.1rem 0;}
.mall-list-mod .mall-list-item{ width: 50%; text-align: center; padding: 0 0.05rem; margin-bottom: 0.1rem; box-sizing: border-box; font-size: 12px; text-align: left;}
.mall-list-mod .mall-nav-link{ display: block; background-color: #FFF; border-radius: 4px; padding-bottom: 0.1rem; overflow: hidden;}
.mall-list-mod .mall-img-box{ height: 1.73rem; overflow: hidden;}
.mall-list-mod .mall-img-box > img{ width: 100%; }
.mall-list-mod .mall-msg1{ margin: 0.04rem 0.05rem 0; color: #1a1a1a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; overflow: hidden; text-overflow: ellipsis; line-height: 0.16rem;}
.mall-list-mod .mall-msg2{ margin: 0.04rem 0.05rem 0; color: #fa2c19;}
</style>